<template>
  <transition name="fade">
    <div class="login-popup" v-show="show">
      <div class="popup-mask" v-if="noClose" @click="isShow"></div>
      <div class="popup-mask" v-else></div>
      <div class="popup" :style="'width:'+width+';'+'height:'+height">
        <slot></slot>
      </div>
    </div>
  </transition>
</template>
<script>
export default {
  data () {
    return {
      show: !1
    }
  },
  // props: ['height', 'width', 'noClose'],
  props: {
    height: String,
    width: String,
    noClose: {
      type: [String, Boolean],
      default () {
        return true
      }
    }
  },
  methods: {
    init (msg = true) {
      this.show = msg
    },
    isShow () {
      this.show = !this.show
      // 可能关闭的时候要进行其他操作
      this.$emit('event')
    }
  }
}
</script>
<style scoped lang="scss">
  .login-popup {
    position: fixed; top: 0; left: 0; bottom: 0; right: 0;
    z-index: 999;
    .popup-mask{
      width: 100%; height:100%;
      background: rgba(0, 0, 0, 0.3);
    }
    .popup {
      position: absolute; top:50%; left:50%; z-index:2;
      transform: translate(-50%,-50%);
    }
  }
</style>
